<template>
	<view class="content">
		<view class="top">
			<view class="top-infos">
				<view class="top-record" @tap="goRecord()">签到记录</view>
				<view class="top-num">1</view>
				<view class="top-text">签到U点数</view>
			</view>
			<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/yellow_bg%402x.png"></image>
		</view>
		<view class="date-area">
			<view class="date-yiqiandao">本月已签到{{beenDo}}天</view>
			<view class="date-month">{{month}}月</view>
			<view class="date-text">每月签到领1U点</view>

			<view class="date-box">
				<view class="date-box-items" v-for="(item,index) in times" :key="index">
					<view class="date-box-items-day" v-if="item.time == 1" :class="[today == item+1 ? 'date-box-items-day-today' : '']">{{index+1}}</view>
					<image class="date-box-items-img" v-if="item.time == 0" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/yiqiandao%402x.png"></image>
					<view class="date-box-items-today" v-if="today == index+1"></view>
				</view>
			</view>

			<view class="qiandao-button" @tap="qiandaoBtn()">签到得U点</view>
		</view>
		<view class="chuangkou-out" v-if="todayQiandao">
			<view class="chuangkou">
				<image class="chuangkou-img" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/chenggong%402x.png"></image>
				<view>签到成功，获得<a>1U点</a></view>
				<image class="chuangkou-out-img" src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/close%402x.png" @tap="closeItem()"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				beenDo: 1, //已签到天数
				month: 8, //月份
				today: 29, //今天
				todayQiandao: false,
				times: [{  //已签到 0  未签到 1
						time: 0
					},
					{
						time: 0
					},
					{
						time: 0
					},
					{
						time: 1
					},
					{
						time: 1
					}, {
						time: 0
					},
					{
						time: 0
					},
					{
						time: 0
					},
					{
						time: 1
					},
					{
						time: 1
					}, {
						time: 0
					},
					{
						time: 0
					},
					{
						time: 0
					},
					{
						time: 1
					},
					{
						time: 1
					}, {
						time: 0
					},
					{
						time: 0
					},
					{
						time: 0
					},
					{
						time: 1
					},
					{
						time: 1
					}, {
						time: 0
					},
					{
						time: 0
					},
					{
						time: 0
					},
					{
						time: 1
					},
					{
						time: 1
					}, {
						time: 0
					},
					{
						time: 0
					},
					{
						time: 0
					},
					{
						time: 1
					},
					{
						time: 1
					},
				],
			}
		},
		onLoad() {

		},
		methods: {
			qiandaoBtn() {
				this.times[this.today-1].time = 0
				this.todayQiandao = true
			},
			closeItem() {
				this.todayQiandao = false
			},
			goRecord() {
				uni.navigateTo({
					url: '../mine-udian-qiandao-record/mine-udian-qiandao-record'
				})
			}
		}
	}
</script>

<style>
	page {
		background: rgba(245, 245, 245, 1);
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
	}

	.top {
		width: 100%;
		height: 146.5px;
		position: relative;
	}

	.top image {
		width: 100%;
		height: 146.5px;
		position: absolute;
	}

	.top-infos {
		width: 100%;
		height: 146.5px;
		position: absolute;
		z-index: 1;
	}

	.top-record {
		position: absolute;
		top: 15px;
		right: 15px;
		font-size: 14px;
		height: 14px;
		line-height: 14px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.top-num {
		width: 100%;
		height: 30px;
		line-height: 30px;
		font-size: 30px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		margin-top: 30.5px;
	}

	.top-text {
		width: 100%;
		height: 21px;
		line-height: 21px;
		margin-top: 13px;
		text-align: center;
		font-size: 15px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(85, 85, 85, 1);
	}

	.date-area {
		position: absolute;
		height: 407px;
		right: 15px;
		left: 15px;
		top: 112.5px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 7.5px 30px 0px rgba(153, 153, 153, 0.2);
		border-radius: 8px;
	}

	.date-yiqiandao {
		height: 15px;
		line-height: 15px;
		margin-top: 18.5px;
		margin-left: 16px;
		font-size: 15px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.date-month {
		height: 25px;
		line-height: 25px;
		position: absolute;
		right: 21.5px;
		top: 27px;
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.date-text {
		margin-left: 16px;
		margin-top: 10px;
		height: 12px;
		line-height: 12px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
	}

	.qiandao-button {
		height: 50px;
		margin: 0 25px;
		background: linear-gradient(180deg, rgba(255, 214, 0, 1) 0%, rgba(254, 177, 2, 1) 100%);
		box-shadow: 0px 2.5px 12.5px 0px rgba(255, 210, 78, 1);
		border-radius: 25px;
		font-size: 16px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(103, 57, 0, 1);
		text-align: center;
		line-height: 50px;
	}

	.date-box {
		padding-top: 14px;
		padding-bottom: 10px;
		width: 100%;
		height: 247.5px;
		display: flex;
		flex-wrap: wrap;
	}

	.date-box-items {
		width: 14.28%;
		height: 49.5px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.date-box-items-day {
		width: 27.5px;
		height: 27.5px;
		text-align: center;
		line-height: 27.5px;
		background: rgba(247, 247, 250, 1);
		border-radius: 50%;
		font-size: 15px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(199, 200, 202, 1);
	}

	.date-box-items-today {
		width: 4.5px;
		height: 4.5px;
		border-radius: 50%;
		background: rgba(255, 117, 149, 1);
		position: absolute;
		bottom: 0;
	}

	.date-box-items-img {
		width: 27.5px;
		height: 27.5px;
	}

	.date-box-items-day-today {
		color: rgba(51, 51, 51, 1);
	}

	.chuangkou-out {
		width: 100%;
		height: 100%;
		position: fixed;
		background: rgba(0, 0, 0, 0.6);
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.chuangkou {
		width: 271.5px;
		height: 173px;
		background: rgba(255, 255, 255, 1);
		border-radius: 10px;
		position: relative;
		display: flex;
		justify-content: center;
	}

	.chuangkou-img {
		height: 69px;
		width: 69px;
		position: absolute;
		top: 26px;
	}

	.chuangkou-out-img {
		position: absolute;
		top: 190px;
		width: 40px;
		height: 40px;
	}

	.chuangkou view {
		height: 15px;
		line-height: 15px;
		position: absolute;
		top: 123px;
		font-size: 15px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.chuangkou view a {
		color: #FE4338;
	}
</style>
